<template>
  <h3>结合 element-plus</h3>
  <p>
    使用 x-menu-item-iteration 还可迭代 element-plus 的
    el-sub-menu、el-menu-item、el-menu-item-group 组件。
  </p>
  <!-- prettier-ignore -->
  <code-demo>
    <el-menu>
      <x-menu-item-iteration
        v-for="item in data"
        v-bind="item"
        :key="item.index"
      ></x-menu-item-iteration>
    </el-menu>

    <template #code>
      {{ `
<template>
  <el-menu>
    <x-menu-item-iteration
      v-for="item in data"
      v-bind="item"
      :key="item.index"
    ></x-menu-item-iteration>
  </el-menu>
</template>

<script setup>
// 插入 index
function insertIndex(data, indexKey = 'index') {
  function recursive(arr, parentId) {
    arr.forEach(function (item, index) {
      const id = parentId ? \`\${parentId}-\${index}\` : \`\${index}\`
      item[indexKey] = id
      item?.children?.length && recursive(item.children, id)
    })
  }
  recursive(data)
  return data
}

// 为源数据插入 index
const data = insertIndex([
  {
    type: 'el-sub-menu',
    title: '货架1',
    icon: 'location',
    children: [
      {
        type: 'el-menu-item-group',
        title: '烟酒区',
        children: [
          { type: 'el-menu-item', title: '第一排' },
          { type: 'el-menu-item', title: '第二排' },
        ],
      },
      {
        type: 'el-menu-item-group',
        title: '饮料区',
        children: [
          { type: 'el-menu-item', title: '第一排' },
          { type: 'el-menu-item', title: '第二排' },
        ],
      },
    ],
  },
  {
    type: 'el-sub-menu',
    title: '货架2',
    icon: 'location',
    children: [
      {
        type: 'el-sub-menu',
        title: '第一组',
        children: [
          { type: 'el-menu-item', title: '第一排' },
          { type: 'el-menu-item', title: '第二排' },
        ],
      },
      {
        type: 'el-sub-menu',
        title: '第二组',
        children: [
          { type: 'el-menu-item', title: '第一排' },
          { type: 'el-menu-item', title: '第二排' },
        ],
      },
    ],
  },
])
</script>
      ` }}
    </template>
  </code-demo>
</template>

<script setup>
// 插入 index
function insertIndex(data, indexKey = 'index') {
  function recursive(arr, parentId) {
    arr.forEach(function (item, index) {
      const id = parentId ? `${parentId}-${index}` : `${index}`
      item[indexKey] = id
      item?.children?.length && recursive(item.children, id)
    })
  }
  recursive(data)
  return data
}

// 为源数据插入 index
const data = insertIndex([
  {
    type: 'el-sub-menu',
    title: '货架1',
    icon: 'location',
    children: [
      {
        type: 'el-menu-item-group',
        title: '烟酒区',
        children: [
          { type: 'el-menu-item', title: '第一排' },
          { type: 'el-menu-item', title: '第二排' },
        ],
      },
      {
        type: 'el-menu-item-group',
        title: '饮料区',
        children: [
          { type: 'el-menu-item', title: '第一排' },
          { type: 'el-menu-item', title: '第二排' },
        ],
      },
    ],
  },
  {
    type: 'el-sub-menu',
    title: '货架2',
    icon: 'location',
    children: [
      {
        type: 'el-sub-menu',
        title: '第一组',
        children: [
          { type: 'el-menu-item', title: '第一排' },
          { type: 'el-menu-item', title: '第二排' },
        ],
      },
      {
        type: 'el-sub-menu',
        title: '第二组',
        children: [
          { type: 'el-menu-item', title: '第一排' },
          { type: 'el-menu-item', title: '第二排' },
        ],
      },
    ],
  },
])

const propsTable = [
  {
    name: 'type',
    desc: '树形数据的每一项的组件类型，不同的类型会有不同的作用',
    type: '"el-sub-menu" | "el-menu-item" | "el-menu-item-el-menu-item-group"',
  },
  {
    name: 'index',
    desc: '树形数据的每一项的唯一id，type 为 "el-menu-item-group" 时可不传',
    type: 'string | number',
  },
  { name: 'title', desc: '树形数据的每一项的文案', type: 'string' },
  {
    name: 'icon',
    desc: '树形数据的每一项的图标名称，基于 element 图标库，不传则不显示图标',
    type: 'string',
  },
  { name: 'children', desc: '当前项的子集', type: 'Array' },
]
</script>

<style lang="scss" scoped></style>
